<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8" />
        <title></title>
        <script src="./vue.js"></script>
    </head>
    <body>
        <div id="app">
            <Child></Child>
        </div>
        <script>

            // 定义组件
            const VueComponent = Vue.extend({
                template: `<div>组件</div>`,
                mounted() {
                    console.log('组件实例', this)
                    console.log(this.__proto__ === VueComponent.prototype) // true
                }
            })
            console.log('组件构造函数', VueComponent)

            // 注册组件
            Vue.component('Child', VueComponent);


            const vm = new Vue({
                el: "#app",
                data: {
                    
                }
            })
            console.log('vm实例', vm)
            console.log('Vue构造函数', Vue)
            console.log(vm.__proto__ === Vue.prototype); // true

            // VueComponent 组件的构造函数
            // VueComponent.prototype 组件的构造函数的原型对象,接就是vc.__proto__
            // Vue.prototype Vue的原型对象
            console.log('最终打印', VueComponent.prototype.__proto__ === Vue.prototype)
            console.log('$on和$emit在哪 - Vue的原型对象', Vue.prototype)

            // 总结:
            // VueComponent.prototype.__proto__ === Vue.prototype
            // 造成这个结果的原因是 Vue.extend() 这个方法造成的
            // Vue.extend() 最关键的一行代码*****
            // VueComponent.prototype = Object.create(Vue.prototype)


            // Object.create() 案例:
            // var obj = { name: '张三' }
            // var obj1 = Object.create(obj)
            // obj1.__proto__ === obj
            // 功能:
            //      以参数为原型创建一个新的对象
            // 参数:
            //      对象
            // 返回值
            //      新对象

        </script>
    </body>
</html>